BEM (Blocco, Elemento, Modificatore) è una metodologia di sviluppo front-end che mira a creare componenti UI riutilizzabili e modulari. Si basa sul principio di dividere l'interfaccia utente in blocchi indipendenti, elementi all'interno di questi blocchi e modificatori che cambiano l'aspetto o il comportamento dei blocchi o degli elementi. Ecco le componenti chiave e come vengono applicate:
Blocco: Rappresenta un'entità indipendente e riutilizzabile dell'interfaccia utente. I blocchi possono essere nidificati l'uno nell'altro, ma rimangono concettualmente indipendenti. Un blocco non dipende dal contesto circostante. Esempi di blocchi includono button, form, header, article. Un blocco deve avere un nome univoco.
Elemento: Parte costituente di un blocco e non può essere utilizzata al di fuori di esso. Gli elementi sono responsabili della funzionalità e della struttura all'interno di un blocco. Esempi di elementi di un blocco form potrebbero essere form__input, form__label, form__submit. Gli elementi dipendono strettamente dal loro blocco genitore.
Modificatore: Un flag che definisce l'aspetto, lo stato o il comportamento di un blocco o di un elemento. I modificatori vengono utilizzati per variare l'aspetto o il comportamento senza creare un componente completamente nuovo. Ad esempio, un blocco button potrebbe avere modificatori come button--primary, button--disabled, button--large. I modificatori sono applicati per creare varianti basate sulle classi base blocco o elemento.
Convenzioni di denominazione:
La sintassi di denominazione BEM è cruciale per la chiarezza e la manutenzione del codice:
block-nameblock-name__element-nameblock-name--modifier-nameblock-name__element-name--modifier-nameVantaggi di BEM:
Ne Demek sitesindeki bilgiler kullanıcılar vasıtasıyla veya otomatik oluşturulmuştur. Buradaki bilgilerin doğru olduğu garanti edilmez. Düzeltilmesi gereken bilgi olduğunu düşünüyorsanız bizimle iletişime geçiniz. Her türlü görüş, destek ve önerileriniz için iletisim@nedemek.page